vue首屏优化

看打包结果

npm run build --report

可在图形化界面分析哪些包过大

优化方法

1.webpack.base.conf.js

将不常用的包从vendor.js中抽离

externals: {
  // 不打包进vendor，都用cdn加载  2020/05/05 lz
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios',
  'ali-oss': 'Oss'
}

key值为import name from 'package' 中的package
value值为该js中导出到window对象上的名字

注意：

import xxx from 'xxx'使用方法不用变

2.index.html

<script src="xxx/vue.min.2.6.10.js"></script>
<script src="xxx/vue-router.2.3.1.js"></script>
<script src="xxx/vuex.min.3.1.1.js"></script>
<script src="xxx/axios.0.16.1.js"></script>
<script src="xxx/aliyun-oss-sdk-6.1.1.min.js"></script>

在自家cdn中引入，gzip压缩，小很多